<template>
	<div class="screen_wrap echarts_box flex_wrap">
		<corner></corner>
		<title1 title="站点空气质量等级分布"></title1>
		<div class="body">
			
			<div class="section1">
				<div class="name">
					<div class="word1">{{siteName}} AQI</div>
					<div class="word2">{{aqiVal}}</div>
				</div>
				<div class="factor">
					<div class="word3">首要/超标污染物</div>
					<div class="item">
						<el-row :gutter="10" style="width: 100%;">
						  <el-col :span="12" v-for="(item,index) in facotrs" :key="index">
				              <span class="label" style="margin-right: 4px;">{{ item.factorName == 'PM25' ? 'PM2.5' : item.factorName }} : </span>
				              <span class="time">{{ item.num || 0 }}
				                <span style="font-size: 12px;margin-left: 2px;">天</span>
				              
				              </span>						  	
						  </el-col>
						</el-row>						
		            </div>
				</div>
			</div>
			<div class="section2">
				<e-chart :options="option" style="height:100%" autoresize></e-chart>
			</div>
			<!--<div class="section3">
				<div class="section3title">首要/超标污染物</div>
				<div class="item">
		            <div  v-for="(item,index) in facotrs" :key="index">
		              <span class="label">{{ item.factorName == 'PM25' ? 'PM2.5' : item.factorName }}:</span>
		              <span class="time">{{ item.num || 0 }}天</span>
		            </div>
	            </div>
			</div>-->
			
			<!--<e-chart :options="option" style="height:100%" autoresize></e-chart>-->
		</div>
	</div>
</template>
<script>
	import { getThisYearGoodDays } from "@/api/bigScreen/bigScreen";
	import corner from '../public/corner'
	import title1 from '../public/title1'
	export default {
		components: {
			corner,
			title1
		},
		data() {
			return {
				option: null,
				allData: null,
				currentIndex: 0,
				siteName: '',
				timer: null,
				facotrs:null,
				aqiVal:''
			}
		},
		mounted() {
			this.initData()
			let that=this
			this.timer=setInterval(function(){
				that.currentIndex++
				if(that.currentIndex>=that.allData.length){
					that.currentIndex=0
				}
				that.init()
			},5000)		
		},
	    beforeDestroy() {
	       clearInterval(this.timer)
	    },			
		methods: {
			initData() {
				getThisYearGoodDays().then(res => {
					this.allData = res.data.data
					this.init()
				})
			},
			init() {
				let info = this.allData[this.currentIndex]
				this.facotrs=info.facotrs
				this.aqiVal=info.aqiVal
				this.siteName=info.siteName
				let data = [{
						value: info.excellent || 0,
						name: '优'
					},
					{
						value: info.good || 0,
						name: '良'
					},
					{
						value: info.mild || 0,
						name: '轻度污染'
					},
					{
						value: info.medium || 0,
						name: '中度污染'
					},
					{
						value: info.severe || 0,
						name: '重度污染'
					},
					{
						value: info.serious || 0,
						name: '严重污染'
					},
				]
				this.option = {
					tooltip: {
						trigger: "item",
						formatter: "{a} <br/>{b}: {c} ({d}%)"
					},
					// 中间显示的文案
					title: {
						zlevel: 0,
						text: [
							'{name|总天数}',
							'{value|' + info.totalDays + '}',
						].join('\n'),
						top: '50%',
						left: '48%',
						textAlign: 'center',
						textStyle: {
							rich: { //总天数
								value: {
									color: '#f3ffff',
									fontSize: 26,
									fontWeight: 'bold',
								},
								name: {
									color: '#f3ffff',
									lineHeight: 30
								},
							},
						},
					},
					// 图例组件
					legend: {
						icon: 'roundRect', // 图例前面的形状
						orient: 'horizontal', // 图例的排列方向 水平/垂直
						top: '10%',
						itemWidth: 8, //图例标记的图形宽度
						itemHeight: 8, //图例标记的图形宽度
						align: 'left',
						textStyle: {
							color: "#f3ffff",
							lineHeight: 8
						},
						// data: data,
						formatter: function(val) {
							let e = data.find(e => val === e.name);
							return e.name + " " + e.value;
						}
					},
					color: ["#00e400", "#ffff00", "#ff7e00", "#ff0000", "#99004c", "#7e0023"],
					series: [{
						name: "空气质量占比",
						type: "pie",
						radius: ["45%", "55%"],//设置中心点
						center: ["50%", "65%"],
						avoidLabelOverlap: false, // 防重叠策略
						// 图例显示 设置了title 所以不需要了
						label: {
							show: false
						},
						// 高亮区设置
						emphasis: {
							label: {
								show: false,
								fontSize: "30",
								fontWeight: "bold"
							}
						},
						labelLine: {
							show: true
						},
						data: data
					}]

				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.wrap {
		height: 100%;
	}
	
	.body {
		height: 100%;
		display: flex;
		.section1{width: 50%;display: flex;align-items: center;justify-content: center;padding: 20px;flex-direction: column;color: #F3FFFF;
		   .name{text-align: center;margin-bottom: 20px;
		      .word1{margin-bottom: 10px;font-weight: bold;}
		      .word2{font-size: 20px;font-family: yjsz;color: #15FEFE;}
		   }
		   .factor{text-align: center;
		        .word3{margin-bottom: 10px;font-weight: bold;}
		     	.item{width: 100%;span{font-size: 14px;font-family: yjsz;}}
		   }		
		}
		.section2{width: 50%;padding: 10px;}
	}
	
	.charts {
		flex: 1;
	}

</style>